<template>
	<view class="tire-install-wrap">
		<navBar title="轮胎安装明细" :showHome="false" :showBack="true" marginLeft="20px" />
		<view class="content-box" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
			<view class="install-list">
				<view class="list-header">
					<view class="plate-num">
						<image
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/car-tag.png">
						</image>
						{{userInfo.userCarInfo.plateNum}}&nbsp;&nbsp;{{userInfo.userCarInfo.driverName}}
					</view>
					<view class="icon">
						<u-icon name="arrow-down" size="40" v-if="showAll" @click="handleShow"></u-icon>
						<u-icon name="arrow-right" size="40" v-else @click="handleShow"></u-icon>
					</view>
				</view>
				<view class="list-box">
					<view class="list-cell list-cell-header">
						<view class="tr tr1">最近安装时间</view>
						<view class="tr">下次换轮</view>
						<view class="tr">下次换胎</view>
						<view class="tr tr4">轮胎信息</view>
					</view>
					<view class="list-cell list-cell-header" v-for="item in installList">
						<view class="td td1">{{ item.installTime }}</view>
						<view class="td">{{ item.replaceWheelTime }}</view>
						<view class="td">{{ item.replaceTireTime }}</view>
						<view class="td td4" @click="lookDetial(item,2)">点击查看</view>
					</view>
				</view>
			</view>
			<view class="install-img-box">
				<view class="img-header">
					<view class="title">轮胎安装信息</view>
					<view class="change-btn" @click="isTrailer=!isTrailer">
						<image
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/change.png">
						</image>
						<view v-if="!isTrailer">切换为挂车</view>
						<view v-else>切换为拖头</view>
					</view>
				</view>
				<view class="gc-detail" v-if="isTrailer">
					<view class="bg">
						<image
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/gc-bg.png">
						</image>
					</view>
					<view class="position left-view1">
						<view class="pos-btn" @click="lookDetial(trailer.L1)">
							<view class="name"
								:class="{'error-bg':trailer.L1&&trailer.L1.isExpire,'blue-bg':trailer.L1&&!trailer.L1.isExpire}">
								拖车轮 左1</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.L1&&trailer.L1.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position left-view2">
						<view class="pos-btn" @click="lookDetial(trailer.L2)">
							<view class="name"
								:class="{'error-bg':trailer.L2&&trailer.L2.isExpire,'blue-bg':trailer.L2&&!trailer.L2.isExpire}">
								拖车轮 左2</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.L2&&trailer.L2.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position left-view3">
						<view class="pos-btn" @click="lookDetial(trailer.L3)">
							<view class="name"
								:class="{'error-bg':trailer.L3&&trailer.L3.isExpire,'blue-bg':trailer.L3&&!trailer.L3.isExpire}">
								拖车轮 左3</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.L3&&trailer.L3.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position left-view4">
						<view class="pos-btn" @click="lookDetial(trailer.L4)">
							<view class="name"
								:class="{'error-bg':trailer.L4&&trailer.L4.isExpire,'blue-bg':trailer.L4&&!trailer.L4.isExpire}">
								拖车轮 左4</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.L4&&trailer.L4.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position left-view5">
						<view class="pos-btn" @click="lookDetial(trailer.L5)">
							<view class="name"
								:class="{'error-bg':trailer.L5&&trailer.L5.isExpire,'blue-bg':trailer.L5&&!trailer.L5.isExpire}">
								拖车轮 左5</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.L5&&trailer.L5.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position left-view6">
						<view class="pos-btn" @click="lookDetial(trailer.L6)">
							<view class="name"
								:class="{'error-bg':trailer.L6&&trailer.L6.isExpire,'blue-bg':trailer.L6&&!trailer.L6.isExpire}">
								拖车轮 左6</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.L6&&trailer.L6.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view1">
						<view class="pos-btn" @click="lookDetial(trailer.R1)">
							<view class="name"
								:class="{'error-bg':trailer.R1&&trailer.R1.isExpire,'blue-bg':trailer.R1&&!trailer.R1.isExpire}">
								拖车轮 右1</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.R1&&trailer.R1.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view2">
						<view class="pos-btn" @click="lookDetial(trailer.R2)">
							<view class="name"
								:class="{'error-bg':trailer.R2&&trailer.R2.isExpire,'blue-bg':trailer.R2&&!trailer.R2.isExpire}">
								拖车轮 右2</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.R2&&trailer.R2.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view3">
						<view class="pos-btn" @click="lookDetial(trailer.R3)">
							<view class="name"
								:class="{'error-bg':trailer.R3&&trailer.R3.isExpire,'blue-bg':trailer.R3&&!trailer.R3.isExpire}">
								拖车轮 右3</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.R3&&trailer.R3.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view4">
						<view class="pos-btn" @click="lookDetial(trailer.R4)">
							<view class="name"
								:class="{'error-bg':trailer.R4&&trailer.R4.isExpire,'blue-bg':trailer.R4&&!trailer.R4.isExpire}">
								拖车轮 右4</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.R4&&trailer.R4.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view5">
						<view class="pos-btn" @click="lookDetial(trailer.R5)">
							<view class="name"
								:class="{'error-bg':trailer.R5&&trailer.R5.isExpire,'blue-bg':trailer.R5&&!trailer.R5.isExpire}">
								拖车轮 右5</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.R5&&trailer.R5.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view6">
						<view class="pos-btn" @click="lookDetial(trailer.R6)">
							<view class="name"
								:class="{'error-bg':trailer.R6&&trailer.R6.isExpire,'blue-bg':trailer.R6&&!trailer.R6.isExpire}">
								拖车轮 右6</view>
							<u-icon name="error-circle-fill" size="36" v-if="trailer.R6&&trailer.R6.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
				</view>
				<view class="tt-detail" v-else>
					<view class="bg">
						<image
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/tt-bg.png">
						</image>
					</view>
					<view class="position left-view1">
						<view class="pos-btn" @click="lookDetial(tractor.L1)">
							<u-icon name="error-circle-fill" size="36" v-if="tractor.L1&&tractor.L1.isExpire"
								color="#F3260A;"></u-icon>
							<view class="name"
								:class="{'error-bg':tractor.L1&&tractor.L1.isExpire,'blue-bg':tractor.L1&&!tractor.L1.isExpire}">
								导向轮 左1</view>
						</view>
					</view>
					<view class="position left-view2">
						<view class="pos-btn" @click="lookDetial(tractor.L2)">
							<u-icon name="error-circle-fill" size="36" v-if="tractor.L2&&tractor.L2.isExpire"
								color="#F3260A;"></u-icon>
							<view class="name"
								:class="{'error-bg':tractor.L2&&tractor.L2.isExpire,'blue-bg':tractor.L2&&!tractor.L2.isExpire}">
								导向轮 左2</view>
						</view>
					</view>
					<view class="position left-view3">
						<view class="pos-btn" @click="lookDetial(tractor.L3)">
							<view class="name"
								:class="{'error-bg':tractor.L3&&tractor.L3.isExpire,'blue-bg':tractor.L3&&!tractor.L3.isExpire}">
								驱动轮 左3</view>
							<u-icon name="error-circle-fill" size="36" v-if="tractor.L3&&tractor.L3.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position left-view4">
						<view class="pos-btn" @click="lookDetial(tractor.L4)">
							<view class="name"
								:class="{'error-bg':tractor.L4&&tractor.L4.isExpire,'blue-bg':tractor.L4&&!tractor.L4.isExpire}">
								驱动轮 左4</view>
							<u-icon name="error-circle-fill" size="36" v-if="tractor.L4&&tractor.L4.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position left-view5">
						<view class="pos-btn" @click="lookDetial(tractor.L5)">
							<view class="name"
								:class="{'error-bg':tractor.L5&&tractor.L5.isExpire,'blue-bg':tractor.L5&&!tractor.L5.isExpire}">
								驱动轮 左5</view>
							<u-icon name="error-circle-fill" size="36" v-if="tractor.L5&&tractor.L5.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position left-view6">
						<view class="pos-btn" @click="lookDetial(tractor.L6)">
							<view class="name"
								:class="{'error-bg':tractor.L6&&tractor.L6.isExpire,'blue-bg':tractor.L6&&!tractor.L6.isExpire}">
								驱动轮 左6</view>
							<u-icon name="error-circle-fill" size="36" v-if="tractor.L6&&tractor.L6.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view1">
						<view class="pos-btn" @click="lookDetial(tractor.R1)">
							<view class="name"
								:class="{'error-bg':tractor.R1&&tractor.R1.isExpire,'blue-bg':tractor.R1&&!tractor.R1.isExpire}">
								导向轮 右1</view>
							<u-icon name="error-circle-fill" size="36" v-if="tractor.R1&&tractor.R1.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view2">
						<view class="pos-btn" @click="lookDetial(tractor.R2)">
							<view class="name"
								:class="{'error-bg':tractor.R2&&tractor.R2.isExpire,'blue-bg':tractor.R2&&!tractor.R2.isExpire}">
								导向轮 右2</view>
							<u-icon name="error-circle-fill" size="36" v-if="tractor.R2&&tractor.R2.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view3">
						<view class="pos-btn" @click="lookDetial(tractor.R3)">
							<view class="name"
								:class="{'error-bg':tractor.R3&&tractor.R3.isExpire,'blue-bg':tractor.R3&&!tractor.R3.isExpire}">
								驱动轮 右3</view>
							<u-icon name="error-circle-fill" size="36" v-if="tractor.R3&&tractor.R3.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view4">
						<view class="pos-btn" @click="lookDetial(tractor.R4)">
							<view class="name"
								:class="{'error-bg':tractor.R4&&tractor.R4.isExpire,'blue-bg':tractor.R4&&!tractor.R4.isExpire}">
								驱动轮 右4</view>
							<u-icon name="error-circle-fill" size="36" v-if="tractor.R4&&tractor.R4.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view5">
						<view class="pos-btn" @click="lookDetial(tractor.R5)">
							<view class="name"
								:class="{'error-bg':tractor.R5&&tractor.R5.isExpire,'blue-bg':tractor.R5&&!tractor.R5.isExpire}">
								驱动轮 右5</view>
							<u-icon name="error-circle-fill" size="36" v-if="tractor.R5&&tractor.R5.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
					<view class="position right-view6">
						<view class="pos-btn" @click="lookDetial(tractor.R6)">
							<view class="name"
								:class="{'error-bg':tractor.R6&&tractor.R6.isExpire,'blue-bg':tractor.R6&&!tractor.R6.isExpire}">
								驱动轮 右6</view>
							<u-icon name="error-circle-fill" size="36" v-if="tractor.R6&&tractor.R6.isExpire"
								color="#F3260A;"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="showInstallPop" mode="bottom">
			<view class="install-pop" v-if="detailInfo">
				<view class="pop-header">
					{{ detailInfo.name? detailInfo.name:'轮胎安装详情'}}
					<view class="close">
						<u-icon name="close" size="40" @click="showInstallPop=false"></u-icon>
					</view>
				</view>
				<view class="pop-content">
					<view class="pop-cell" v-if="detailType==1">
						<view class="label">轮胎名称：</view>
						<view class="title">{{detailInfo.goodsName}}</view>
					</view>
					<view class="pop-cell goods-img" v-if="detailType==2">
						<view class="img" v-if="detailInfo.goodsImage">
							 <u-album :urls="[detailInfo.goodsImage]" keyName="goodsImg"></u-album>
						</view>
						<image v-else
							src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_nomal.png">
						</image>
						<view class="info">
							<view class="goods-name">{{detailInfo.goodsName}}</view>
							<view class="goods-count">x{{detailInfo.installQuantity}}</view>
						</view>
					</view>
					<view class="pop-cell" v-if="detailInfo.installImage&&detailInfo.installImage.length > 0&&detailType==1">
						<view class="label">安装照片：</view>
						<view class="title poto">
							<template  v-for="item in detailInfo.installImage"> 
							     <u-album :urls="[item]" :keyName="item"></u-album>
							</template>
							<!-- <image v-for="item in detailInfo.installImage" :src="item" :key="item"></image> -->
							
						</view>
					</view>
					<view class="pop-cell" v-if="detailType==2">
						<view class="label">安装时间：</view>
						<view class="title">{{detailInfo.installTime}}</view>
					</view>
					<view class="pop-cell">
						<view class="label">下次换轮：</view>
						<view class="title error" v-if="detailInfo.isWheelExpire">
							预计{{ detailInfo.replaceWheelTime}}换轮，已超{{detailInfo.wheelExpireTime[0]}}天， 请尽快处理！
						</view>
						<view class="title" v-else>
							预计{{ detailInfo.replaceWheelTime}}
						</view>
					</view>
					<view class="pop-cell">
						<view class="label">下次换胎：</view>
						<view class="title error" v-if="detailInfo.isTireExpire">
							预计{{ detailInfo.replaceTireTime}}换胎，已超{{detailInfo.tireExpireTime[0]}}天， 请尽快处理！
						</view>
						<view class="title" v-else>
							预计{{ detailInfo.replaceTireTime}}
						</view>
					</view>
				</view>
				<view class="pop-btn">
					<u-button type="primary" text="联系门店" @click="callPhone" shape="circle" v-if="detailType==1"></u-button>
					<u-button type="primary" text="关闭" @click="showInstallPop=false" shape="circle" v-else></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		name: 'tire-install',
		components: {
			navBar
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
			...mapGetters('user', ['getUserInfo']),
		},
		data() {
			return {
				isTrailer: false,
				userInfo: '',
				currentInstallList: [],
				installList: [],
				showAll: false,
				trailer: {
					L1: null,
					L2: null,
					L3: null,
					L4: null,
					L5: null,
					L6: null,
					R1: null,
					R2: null,
					R3: null,
					R4: null,
					R5: null,
					R6: null
				},
				tractor: {
					L1: null,
					L2: null,
					L3: null,
					L4: null,
					L5: null,
					L6: null,
					R1: null,
					R2: null,
					R3: null,
					R4: null,
					R5: null,
					R6: null
				},
				showInstallPop: false,
				detailInfo: null,
				detailType: 1,
			}
		},
		methods: {
			//初始化时间
			//设置等待时间
			formatTime(startTime, endTime) {
				// if(startTime){
				// 	startTime = startTime +' 00:00:00'
				// }
				// if(endTime){
				// 	endTime = endTime +' 23:59:59'
				// }
				var date1 = startTime ? new Date(startTime.replace(/-/g, '/')).getTime() : new Date().getTime()
				var date2 = endTime ? new Date(endTime.replace(/-/g, '/')).getTime() : new Date().getTime();
				var date3 = date2 - date1;
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				if (days < 0) {
					days = days * (-1)
				}
				var leave1 = date3 % (24 * 3600 * 1000);
				var hours = Math.floor(leave1 / (3600 * 1000));
				var leave2 = leave1 % (3600 * 1000);
				var minutes = Math.floor(leave2 / (60 * 1000));
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				return [days, hours, minutes, seconds]
			},
			// 初始化页面
			async initData() {
				this.userInfo = uni.getStorageSync('userInfo') || {}
				try {
					const res = await this.$request({
						method: 'GET',
						url: `/order-center/app/install-confirm/install/detail/driver?carNo=${this.userInfo.userCarInfo.plateNum}&userId=${this.getUserInfo.id}`,
					})
					res.datas.installedSkuItems.forEach(item => {
						// 判断时间是否超期
						let nowTime = new Date().getTime()
						item.goodsImage= item.goodsImage?item.goodsImage.replace(/\s+/g,""):''
						//换胎时间
						if (nowTime > new Date(item.replaceTireTime).getTime()) {
							item.isTireExpire = true
							item.tireExpireTime = this.formatTime(item.replaceTireTime)
						} else {
							item.isTireExpire = false
							item.tireExpireTime = this.formatTime(null, item.replaceTireTime)
						}
						//换轮时间
						if (nowTime > new Date(item.replaceWheelTime).getTime()) {
							item.isWheelExpire = true
							item.wheelExpireTime = this.formatTime(item.replaceWheelTime)
						} else {
							item.isWheelExpire = false
							item.wheelExpireTime = this.formatTime(null, item.replaceWheelTime)
						}
						if (item.installImage) {
							item.installImage = item.installImage.split(',')
						} else {
							item.installImage = []
						}
					})
					res.datas.installedItems.forEach(item => {
						// 判断时间是否超期
						let nowTime = new Date().getTime()
						// let year = new Date().getFullYear()
						// let month = new Date().getMonth()+1
						// let day =  new Date().getDate()
						// let nowDate = year+'-'+(month>9?month:'0'+month)+'-'+(day>9?day:'0'+day)
						//换胎时间
						if (nowTime > new Date(item.replaceTireTime).getTime()) {
							item.isTireExpire = true
							item.tireExpireTime = this.formatTime(item.replaceTireTime)
						} else {
							item.isTireExpire = false
							item.tireExpireTime = this.formatTime(null, item.replaceTireTime)
						}
						//换轮时间
						if (nowTime > new Date(item.replaceWheelTime).getTime()) {
							item.isWheelExpire = true
							item.wheelExpireTime = this.formatTime(item.replaceWheelTime)
						} else {
							item.isWheelExpire = false
							item.wheelExpireTime = this.formatTime(null, item.replaceWheelTime)
						}
						if(item.isWheelExpire ||item.isTireExpire){
							item.isExpire = true
						}else{
							item.isExpire = false
						}
						if (item.installImage) {
							item.installImage = item.installImage.split(',')
						} else {
							item.installImage = []
						}
						if (item.installType == 1) {
							switch (item.tyreType) {
								case 'L1':
									item.name = '拖车轮左1'
									this.trailer.L1 = item
									break;
								case 'L2':
									item.name = '拖车轮左2'
									this.trailer.L2 = item
									break;
								case 'L3':
									item.name = '拖车轮左3'
									this.trailer.L3 = item
									break;
								case 'L4':
									item.name = '拖车轮左4'
									this.trailer.L4 = item
									break;
								case 'L5':
									item.name = '拖车轮左5'
									this.trailer.L5 = item
									break;
								case 'L6':
									item.name = '拖车轮左6'
									this.trailer.L6 = item
									break;
								case 'R1':
									item.name = '拖车轮右1'
									this.trailer.R1 = item
									break;
								case 'R2':
									item.name = '拖车轮右2'
									this.trailer.R2 = item
									break;
								case 'R3':
									item.name = '拖车轮右3'
									this.trailer.R3 = item
									break;
								case 'R4':
									item.name = '拖车轮右4'
									this.trailer.R4 = item
									break;
								case 'R5':
									item.name = '拖车轮右5'
									this.trailer.R5 = item
									break;
								case 'R6':
									item.name = '拖车轮右6'
									this.trailer.R6 = item
									break;
								default:
									break;
							}

						}
						// 拖头
						if (item.installType == 2) {
							switch (item.tyreType) {
								case 'L1':
									item.name = '导向轮左1'
									this.tractor.L1 = item
									break;
								case 'L2':
									item.name = '导向轮左2'
									this.tractor.L2 = item
									break;
								case 'L3':
									item.name = '驱动轮左3'
									this.tractor.L3 = item
									break;
								case 'L4':
									item.name = '驱动轮左4'
									this.tractor.L4 = item
									break;
								case 'L5':
									item.name = '驱动轮左5'
									this.tractor.L5 = item
									break;
								case 'L6':
									item.name = '驱动轮左6'
									this.tractor.L6 = item
									break;
								case 'R1':
									item.name = '导向轮右1'
									this.tractor.R1 = item
									break;
								case 'R2':
									item.name = '导向轮右2'
									this.tractor.R2 = item
									break;
								case 'R3':
									item.name = '驱动轮右3'
									this.tractor.R3 = item
									break;
								case 'R4':
									item.name = '驱动轮右4'
									this.tractor.R4 = item
									break;
								case 'R5':
									item.name = '驱动轮右5'
									this.tractor.R5 = item
									break;
								case 'R6':
									item.name = '驱动轮右6'
									this.tractor.R6 = item
									break;
								default:
									break;
							}
						}

					})
					this.currentInstallList = res.datas.installedSkuItems
					this.installList.push(this.currentInstallList[0])
				} catch (e) {

				}
			},
			//列表显示切换
			handleShow() {
				this.showAll = !this.showAll
				this.installList = []
				if (this.showAll) {
					this.currentInstallList.forEach(item => {
						this.installList.push(item)
					})
				} else {
					this.installList.push(this.currentInstallList[0])
				}
			},
			lookDetial(val, type) {
				
				if (val) {
					this.showInstallPop = true
					this.detailInfo = JSON.parse(JSON.stringify(val)) 
					this.detailType = type ? type : 1
				}
			},
			//电话
			callPhone() {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: this.detailInfo.terminalPhone
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: this.detailInfo.terminalPhone,
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: this.detailInfo.terminalPhone
								})
							}
						}
					})
				}
			},

		},
		onLoad() {
			this.initData()
		}
	}
</script>

<style scoped lang="scss">
	.tire-install-wrap {
		width: 100%;
		height: 100%;

		.install-pop {
			padding: 24rpx;
			background: #fff;

			.pop-header {
				padding-bottom: 24rpx;
				text-align: center;
				position: relative;
				border-bottom: 2rpx solid #eee;

				.close {
					position: absolute;
					right: 24rpx;
					top: 10rpx;
				}
			}

			.pop-btn {
				padding-top: 24rpx;

				/deep/ .u-button {
					width: 80%;
				}
			}

			.pop-content {
				padding: 24rpx;

				.pop-cell {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					padding: 24rpx 0;

					.label {
						color: #4A5366;
						width: 150rpx;
						margin-right: 24rpx;
						text-align: right;
					}

					.title {
						width: calc(100% - 174rpx);
						color: #333333;
					}

					.poto {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						/deep/ image {
							border-radius: 10rpx;
							width: 150rpx !important;
							height: 150rpx !important;
							margin-right: 10rpx;
							margin-bottom: 10rpx;
						}
					}

					.error {
						color: #F3260A;
					}
				}
				.goods-img{
					.goods-name{
						font-size: 16px;
						font-weight: 600;
						margin-bottom: 20rpx;
					}
					/deep/ image {
						border-radius: 10rpx;
						width: 150rpx !important;
						height: 150rpx !important;
						margin-right: 10rpx;
						margin-bottom: 10rpx;
					}
				}
			}

		}

		.content-box {
			padding: 20rpx;
			width: calc(100% - 40rpx);

			.install-list {
				background: #FFFFFF;
				border-radius: 16rpx;

				.list-header {
					padding: 24rpx;
					border-bottom: 2rpx solid #eee;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.plate-num {
						display: flex;
						font-size: 16px;
						font-weight: bold;
						color: #040812;

						image {
							width: 36rpx;
							height: 40rpx;
							margin-right: 14rpx;
						}
					}
				}

				.list-box {
					padding: 24rpx;
					transition: all .3s;
					overflow: hidden auto;
					min-height: 103rpx;
					max-height: 324rpx;

					.list-cell {
						font-size: 14px;
						margin-bottom: 20rpx;
					}

					.list-cell-header {
						display: flex;

						.tr,
						.td {
							width: 25%;
							color: #4A5366;
							text-align: center;
						}

						.tr1,
						.td1 {
							width: 30%;
						}

						.tr4,
						.td4 {
							width: 20%;
						}

						.td4 {
							color: #1E6CFF;
						}

						.td {
							font-size: 13px;
						}
					}
				}
			}

			.install-img-box {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-top: 24rpx;

				.img-header {
					display: flex;
					justify-content: space-between;
					padding-bottom: 24rpx;

					.title {
						font-size: 17px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: bold;
						color: #000000;
					}

					.change-btn {
						font-size: 14px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #1780F2;
						display: flex;
						align-items: center;

						image {
							width: 28rpx;
							height: 24rpx;
							margin-right: 4rpx;
						}
					}
				}

				.tt-detail {
					position: relative;
					display: flex;

					.bg {
						height: 1000rpx;
						width: 100%;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.position {
						position: absolute;
						z-index: 2;
						border-radius: 8rpx;

						.pos-btn {
							display: flex;
							align-items: center;

							.name {
								width: 50rpx;
								background: #ECECEC;
								border-radius: 8rpx;
								text-align: center;
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #999999;
								padding: 8rpx 0;
								border: 2rpx solid #eee;
							}

							.blue-bg {
								background: #DDEEFF;
								color: #1780F2;
								border: 2rpx solid #1780F2;
							}

							.error-bg {
								color: #F3260A;
								background: #FFEAE7;
								border: 2rpx solid #F3260A;
							}

						}
					}

					.left-view1 {
						left: 5%;
						top: 1%;
					}

					.left-view2 {
						left: 5%;
						top: 20%;
					}

					.left-view3 {
						left: 3%;
						top: 58%;

						.pos-btn {
							display: inline-block;

							/deep/ .u-icon {
								margin-left: 14rpx;
								margin-top: 4rpx;
							}
						}
					}

					.left-view4 {
						left: 15%;
						top: 58%;

						.pos-btn {
							display: inline-block;

							/deep/ .u-icon {
								margin-left: 14rpx;
								margin-top: 4rpx;
							}
						}
					}

					.left-view5 {
						left: 3%;
						top: 79%;

						.pos-btn {
							display: inline-block;

							/deep/ .u-icon {
								margin-left: 14rpx;
								margin-top: 4rpx;
							}
						}
					}

					.left-view6 {
						left: 15%;
						top: 79%;

						.pos-btn {
							display: inline-block;

							/deep/ .u-icon {
								margin-left: 14rpx;
								margin-top: 4rpx;
							}
						}
					}

					.right-view1 {
						right: 0;
						top: 1%;
					}

					.right-view2 {
						right: 0;
						top: 20%;
					}

					.right-view3 {
						right: 3%;
						top: 58%;

						.pos-btn {
							display: inline-block;

							/deep/ .u-icon {
								margin-left: 14rpx;
								margin-top: 4rpx;
							}
						}
					}

					.right-view4 {
						right: 15%;
						top: 58%;

						.pos-btn {
							display: inline-block;

							/deep/ .u-icon {
								margin-left: 14rpx;
								margin-top: 4rpx;
							}
						}
					}

					.right-view5 {
						right: 3%;
						top: 79%;

						.pos-btn {
							display: inline-block;

							/deep/ .u-icon {
								margin-left: 14rpx;
								margin-top: 4rpx;
							}
						}
					}

					.right-view6 {
						right: 15%;
						top: 79%;

						.pos-btn {
							display: inline-block;

							/deep/ .u-icon {
								margin-left: 14rpx;
								margin-top: 4rpx;
							}
						}
					}
				}

				.gc-detail {
					position: relative;
					display: flex;

					.bg {
						height: 875rpx;
						width: 100%;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.position {
						position: absolute;
						z-index: 2;
						border-radius: 8rpx;

						.pos-btn {
							display: inline-block;

							/deep/ .u-icon {
								margin-left: 14rpx;
								margin-top: 4rpx;
							}

							.name {
								width: 50rpx;
								background: #ECECEC;
								border-radius: 8rpx;
								text-align: center;
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #999999;
								padding: 8rpx 0;
							}

							.blue-bg {
								background: #DDEEFF;
								color: #1780F2;
								border: 2rpx solid #1780F2;
							}

							.error-bg {
								color: #F3260A;
								background: #FFEAE7;
								border: 2rpx solid #F3260A;
							}
						}
					}

					.left-view1 {
						top: 14%;
						left: 2%;
					}

					.left-view2 {
						top: 14%;
						left: 15%;
					}

					.left-view3 {
						top: 39%;
						left: 2%;
					}

					.left-view4 {
						top: 39%;
						left: 15%;
					}

					.left-view5 {
						top: 64%;
						left: 2%;
					}

					.left-view6 {
						top: 64%;
						left: 15%;
					}

					.right-view1 {
						top: 14%;
						right: 2%;
					}

					.right-view2 {
						top: 14%;
						right: 15%;
					}

					.right-view3 {
						top: 39%;
						right: 2%;
					}

					.right-view4 {
						top: 39%;
						right: 15%;
					}

					.right-view5 {
						top: 64%;
						right: 2%;
					}

					.right-view6 {
						top: 64%;
						right: 15%;
					}
				}
			}
		}
	}
</style>